var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    repeatRadio = document.getElementById('repeatRadio'),
    repeatXRadio = document.getElementById('repeatXRadio'),
    repeatYRadio = document.getElementById('repeatYRadio'),
    noRepeatRadio = document.getElementById('noRepeatRadio'),
    image = new Image();

function fillCanvasWithPattern(repeatString){
    var pattern = context.createPattern(image, repeatString);
    context.clearRect(0,0,canvas.width,canvas.height);
    context.fillStyle = pattern;
    context.fillRect(0,0,canvas.width,canvas.height);
    context.fill();
}

image.src = 'redball.png';
image.onload = function(){
    fillCanvasWithPattern('repeat');
};

repeatRadio.onclick = function(){
    fillCanvasWithPattern('repeat');
};

repeatXRadio.onclick = function(){
    fillCanvasWithPattern('repeat-x');
};

repeatYRadio.onclick = function(){
    fillCanvasWithPattern('repeat-y');
};

noRepeatRadio.onclick = function(){
    fillCanvasWithPattern('no-repeat');
};
